<#include "/common/taglibs.ftl" />
<#assign server=applicationConfiguration.getProperty('server.port')>
<#assign serverId=applicationConfiguration.getProperty('server.id', 'UNKNOWN')>
<div class="row">
    <div class="col-xl-12">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Server Info
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                Current Server ID：${serverId} <br>
                Current Server Port：${server} <br>
                Session Id：${sessionId!} <br>
            </div>
        </div>
    </div>

    <div class="col-xl-12">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
						<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
						</span>
                        <h3 class="m-portlet__head-text">
                            Session Attributes Form
                        </h3>
                    </div>
                </div>
            </div>
            <!--begin::Form-->
            <form class="m-form" method="post" id="mainForm">
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">Attribute Key:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" name="key">
                                <span class="m-form__help">Please enter attribute key</span>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">Attribute Value:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" name="value">
                                <span class="m-form__help">Please enter attribute value</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        <div class="row">
                            <div class="col-lg-3"></div>
                            <div class="col-lg-6">
                                <button type="submit" class="btn btn-success">Submit</button>
                                <button type="reset" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--end::Form-->
        </div>
    </div>

    <div class="col-xl-12">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Session Attributes Table
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <!--begin::Section-->
                <div class="m-section">
                    <div class="m-section__content">
                        <table class="table table-striped m-table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Key</th>
                                <th>Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#list sessionAttributes?keys as key>
                            <tr>
                                <th scope="row">${key_index + 1}</th>
                                <td>${key}</td>
                                <td>${sessionAttributes[key]}</td>
                                <td data-key="${key}">
                                    <button class="btn m-btn btn-danger btn-delete">Delete</button>
                                </td>
                            </tr>
                            </#list>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--end::Section-->
            </div>
            <!--end::Form-->
        </div>
    </div>


</div>


<page-plugin-style>
</page-plugin-style>
<page-style>
</page-style>
<page-plugin-script>
</page-plugin-script>
<page-script>
    <script>
        jQuery(function ($) {
            var $form = $("#mainForm");
            $.m.form.validate($form, {
                rules: {
                    key: {
                        required: true
                    },
                    value: {
                        required: true
                    }
                }
            });

            $(".btn-delete").click(function () {
                var key = $(this).closest("td").data("key");
                console.log("delete session key", key)
                $.m.ajaxAction({
                    url: "${ctx}/dev/session/delete",
                    data: {
                        key: key
                    },
                    successCallback: function (data) {
                        $.m.success("Delete Successfully");
                        window.location.reload();
                    }
                })
            });
        });
    </script>
</page-script>


